<template>


    <!-- 返回顶部的一个按钮 -->
    <transition enter-active-class="animate__animated animate__fadeInUpBig  animate__faster"
        leave-active-class="animate__animated animate__fadeOutDownBig animate__fast">
        <div class="btnTop" v-show="btnFlag" @click="backTop()" :style="props.sty"></div>
    </transition>

    <!-- 使用了element的滚动条组件是没办法获取到浏览器的滚动距离的,要通过给的函数来获取 -->

</template>

<!------------------------------>

<script setup lang="ts">import type { StyleValue } from '@vue/runtime-dom';
import Bus from '../hooks/bus'
//Flag:传值
interface props { 
    sty?: StyleValue
    hight?: number
}
let props = withDefaults(defineProps<props>(), {
    hight: 200,
})

//Note:原理:监听浏览器BOM元素的数值变化
let btnFlag = ref<boolean>(false)
let scro: number
let REE: any
const backTop = () => {
    if (scro === 0)return  //终止条件
    //帧率移动
    Bus.emit('toScroll',  (scro + Math.floor(-scro / 6)),REE )
    requestAnimationFrame(backTop)
}

//Note:设置监听,监听浏览器离开顶部的距离scrolltop,以便设置消失或出现
Bus.on('getScroll', (scrolltop: number, REF: any) => {
    REE=REF
    scro = scrolltop

    if (scrolltop >= props.hight) {
        btnFlag.value=true
    } else {
        btnFlag.value=false
    }
    })

</script>

<!------------------------------>

<style scoped lang="scss">


.btnTop{
    cursor: pointer !important;
    position: fixed !important;
    background-image: url('../assets/svg/uptop.svg') !important;
    background-repeat: no-repeat !important;
    height: 3rem !important;
    width: 3rem !important;
    border-radius: 50% !important;
}

</style>